import React, { PropTypes } from 'react';
import $ from 'jquery';
import ZoomControl from './ZoomControl.jsx';
import Toolbox from './Toolbox.jsx';
import CityControl from './CityControl.jsx';
import * as Region from '../gisdata/Region.js';
import * as Point from '../gisdata/Point.js';
import * as Measure from '../gisdata/Measure.js';
import { message } from 'antd';

class Map extends React.Component {
  static propTypes: {
    AddPoint: PropTypes.bool.isRequired,
    todos: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired,
    dataRegions: PropTypes.array.isRequired,
    dataPoints: PropTypes.array.isRequired,
    selectedRegion: PropTypes.object.isRequired,
    changeType: PropTypes.string.isRequired,
    clickRegion: PropTypes.func.isRequired,
    clickPoint: PropTypes.func.isRequired,
    refreshPointsInList: PropTypes.func.isRequired,
    refreshRegionsInList: PropTypes.func.isRequired
  }

  constructor(props) {
    super(props);
    this.map = null;
    this.state = {
      zoom: 11,
      selectedRegion: null
    }
    Region.search();

    this.addIndex = 0;
    this.addRegionIndex = 0;
  }

  /**
   * 组件挂载后初始化地图
   */
  componentDidMount() {
    let controls_zoombars = [
      new SuperMap.Control.Navigation({
        dragPanOptions: {
          enableKinetic: true
        }
      })
    ];
    var map = new SuperMap.Map("map",
      {
        controls: controls_zoombars,
        allOverlays: true
      }
    );
    let layer = new SuperMap.Layer.CloudLayer();
    map.addLayer(layer);
    map.setLayerIndex(layer, 0);
    map.setBaseLayer(layer);

    map.setCenter(new SuperMap.LonLat(12958400.883957, 4852082.440605948), 11);

    map.events.on({
      "zoomend": (evt) => {
        this.refs.zoomcontrol.setZoom(evt.object.zoom);
      }
    });

    var layer_edit = new SuperMap.Layer.Vector("edit");
    var layer_point = new SuperMap.Layer.Vector("branches");
    var strategy = new SuperMap.Strategy.GeoText();
    strategy.groupField = "area_status";
    strategy.styleGroups = Region.getTextStyleGroups();
    var layer_region_label = new SuperMap.Layer.Vector("Label", { renderers: ["SVG"], strategies: [strategy] });
    var layer_region = new SuperMap.Layer.Vector("region", { renderers: ["SVG"] });
    map.addLayers([layer_region, layer_region_label, layer_point, layer_edit]);

    this.layer_point = layer_point;
    this.map = map;
    this.layer_region = layer_region;
    this.layer_region_label = layer_region_label;
    this.selectedRegions = [];
    this.showRegionsToMap = this.showRegionsToMap.bind(this);
    this.clickFeature = this.clickFeature.bind(this);
    this.layer_edit = layer_edit;

    var that = this;
    var control_select = new SuperMap.Control.SelectFeature(
      [this.layer_region, this.layer_region_label, layer_point],
      {
        callbacks: {
          click: function (feature) {
            that.clickFeature(feature);
          }
        },
        multiple: false,
        hover: false,
        multipleKey: "ctrlKey",
        clickout: false,
        repeat: true
      }
    );
    map.addControl(control_select);
    control_select.activate();
    this.control_select = control_select;

    var control_drawPoint = new SuperMap.Control.DrawFeature(
      layer_edit,
      SuperMap.Handler.Point,
      { multi: false }
    );
    control_drawPoint.events.on({
      "featureadded": function (e) {
        that.drawPointCompleted(e);
      }
    });
    map.addControl(control_drawPoint);
    this.control_drawPoint = control_drawPoint;
    this.drawPointCompleted = this.drawPointCompleted.bind(this);

    //自由画区
    let control_drawPolygon = new SuperMap.Control.DrawFeature(layer_edit, SuperMap.Handler.Polygon, { multi: false });
    control_drawPolygon.events.on({
      "featureadded": function (e) {
        that.drawPolygonCompleted(e);
      }
    });
    map.addControl(control_drawPolygon);
    this.control_drawPolygon = control_drawPolygon;
    this.drawPolygonCompleted = this.drawPolygonCompleted.bind(this);

    Measure.init(map, this.control_select);
  }

  /**
   * 即将被改变props时
   */
  componentWillReceiveProps(nextProps) {
    switch (nextProps.changeType) {
      case "refreshRegions":
        this.showRegionsToMap(nextProps.dataRegions);
        break;
      case "selectRegion":
        let feature = Region.getFeatureInLayer(nextProps.selectedRegion, this.layer_region);
        if (feature) {
          Region.select(feature, this.layer_region, this.selectedRegions);
        }
        break;
      case "refreshPoints":
        this.showPointsToMap(nextProps.dataPoints);
        break;
      case "selectPoint":
        let pfeature = Region.getFeatureInLayer(nextProps.selectedPoint, this.layer_point);
        if (pfeature) {
          Point.select(pfeature, this.map);
        }
        break;
      default:
        break;
    }
  }

  showRegionsToMap(data) {
    Region.showRegionsToMap(data, this.layer_region, this.layer_region_label, this.map);
  }

  showPointsToMap(data) {
    Point.showPointsToMap(data, this.layer_point, this.map);
  }

  clickFeature(feature) {
    var type = feature.attributes.type;
    switch (type) {
      case "region":
        Region.select(feature, this.layer_region, this.selectedRegions);
        this.props.clickRegion(feature.attributes);
        break;
      case "text-region":
        var f = Region.getFeatureInLayer(feature.attributes, this.layer_region);
        if (f) {
          Region.select(f, this.layer_region, this.selectedRegions);
          this.props.clickRegion(f.attributes);
        }
        break;
      case "point":
        Point.select(feature, this.map);
        this.props.clickPoint(feature.attributes);
        break;
      case "clear-measure":
        Measure.clearMeasure(feature);
        break;
      default:
        break;
    }
  }

  drawPoint() {
    this.control_drawPoint.activate();
  }


  /**
   * 标点完成，地图添加新网点marker
   */
  drawPointCompleted(e) {
    this.control_drawPoint.deactivate();
    this.layer_edit.removeAllFeatures();
    this.addIndex++;

    let geometry = e.feature.geometry;
    let geo_point = new SuperMap.Geometry.Point(geometry.x, geometry.y);
    let poi = new SuperMap.Feature.Vector(geo_point);

    poi.style = Point.getAddStyle();
    poi.attributes = {
      name: '新增网点' + this.addIndex,
      address: "新增地址" + this.addIndex,
      smx: geometry.x,
      smy: geometry.y,
      type: "point",
      id: "add_" + this.addIndex
    };
    this.layer_point.addFeatures([poi]);
    message.success('新增网点成功', 3);
    this.props.refreshPointsInList([poi.attributes]);
  }

  /**
   * 激活画面的控件
   */
  drawRegion() {
    this.control_drawPolygon.activate();
  }

  /**
   * 标面完成
   */
  drawPolygonCompleted(e) {
    this.control_drawPolygon.deactivate();
    this.layer_edit.removeAllFeatures();
    this.addRegionIndex++;
    let f = e.feature;
    f.style = Region.getStyle();

    let name = "新增区划" + this.addRegionIndex;
    let attr = {
      oldStyle: Region.getStyle(),
      name: name,
      area_status: 0
    }
    f.attributes = attr;

    let center = f.geometry.getCentroid();

    let geoText = new SuperMap.Geometry.GeoText(center.x, center.y, name);
    let attr_label = attr;
    attr_label.type = "text-region";
    let style = Region.getTextStyle();
    let geotextFeature = new SuperMap.Feature.Vector(geoText, attr_label, style);
    this.layer_region.addFeatures([f]);
    this.layer_region_label.addFeatures([geotextFeature]);
    this.props.refreshRegionsInList([attr]);
  }

  /**
   * 平移地图
   */
  panMap() {
    this.control_drawPoint.deactivate();
    this.control_drawPolygon.deactivate();
  }

  /**
   * 测距
   */
  measure() {
    Measure.activate();
  }

  clearMap() {

  }

  zoomOut() {
    this.map.zoomOut();
  }

  zoomIn() {
    this.map.zoomIn();
  }

  render() {
    return (
      <div className="map" id="map" >
        <CityControl />
        <Toolbox ref="toolbox"
          addPoint={this.drawPoint.bind(this)}
          addRegion={this.drawRegion.bind(this)}
          panMap={this.panMap.bind(this)}
          measure={this.measure.bind(this)}
          />
        <ZoomControl zoomOut={this.zoomOut.bind(this)}
          zoomIn={this.zoomIn.bind(this)}
          ref="zoomcontrol" />
      </div>
    );
  }
};

export default Map;



